{% extends "base.html" %}
{% block title %}
  松果论坛首页
{% endblock %}
{% block head %}

{% endblock %}
{% block body %}
  <div class="row mt-1">
    <div class="col"></div>
    <div class="col-10">
      <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
          <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
          <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="{{ url_for('static', filename='img/slides/1.jpg') }}" class="d-block w-100 rounded" alt="...">
            <div class="carousel-caption d-none d-md-block">
              <h5>欢迎使用松果论坛</h5>
              <p>松果论坛是您的好帮手</p>
            </div>
          </div>
          <div class="carousel-item">
            <img src="{{ url_for('static', filename='img/slides/2.jpg') }}" class="d-block w-100 rounded" alt="...">
            <div class="carousel-caption d-none d-md-block">
              <h5>一个年轻人的聚焦社区</h5>
              <p>在这里你可以发布任何疑问，并得到及时的回答</p>
            </div>
          </div>
          <div class="carousel-item">
            <img src="{{ url_for('static', filename='img/slides/3.jpg') }}" class="d-block w-100 rounded" alt="...">
            <div class="carousel-caption d-none d-md-block">
              <h5>开源项目！</h5>
              <p>本网站已经开源，欢迎网友使用</p>
            </div>
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-target="#carouselExampleCaptions" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </button>
      </div>
      <script>
          $('.carousel').carousel({
              interval: 2000
          })
      </script>
    </div>
    <div class="col"></div>
  </div>

  <div class="row mt-1">
    <div class="col">
    </div>
    <div class="col-10">
      <ul class="list-unstyled">
        {% for question in questions.items %}
          <li class="media bg-white rounded my-1 pt-2 border border-info">

            <img src="{{ url_for('static', filename='img/avatars/'+question.author.extend.avatar_name) }}"
                 class="mr-1 ml-1 mt-2" alt="..." width="64px"
                 height="64px">
            <div class="media-body ml-3">
              <h5 class="mt-0 mb-0"><a href="{{ url_for('QA.detail', question_id=question.id) }}"
                                       class="text-success">{{ question.title }}</a></h5>
              <p class="">
                <a href="{{ url_for('QA.detail', question_id=question.id) }}"
                   class="text-dark">{{ question.content|truncate(length=100) }}</a>
              </p>
              <p style="text-align: right" class="text-muted mr-2"><span
                      class="mr-2">{{ question.author.username }}</span>{{ question.create_time }}</p>
            </div>
          </li>
        {% endfor %}


      </ul>
    </div>
    <div class="col">
    </div>
  </div>
  <div class="row">
    <div class="col">
    </div>
    <div class="col-10">
      <nav aria-label="Page navigation example">
        <ul class="pagination justify-content-center">
          <li {% if not questions.has_prev %} class="page-item disabled" {% else %}
                                              class="page-item active" {% endif %}>
            <a class="page-link" href="{{ url_for('QA.index', page_index=questions.prev_num) }}">上一页</a>
          </li>
          {% for num in range(1, questions.pages + 1) %}
            <li {% if num==questions.page %} class="page-item active" {% else %} class="page-item" {% endif %}>
              <a class="page-link" href="{{ url_for('QA.index', page_index=num) }}">{{ num }}</a>
            </li>
          {% endfor %}

          <li {% if not questions.has_next %} class="page-item disabled" {% else %}
                                              class="page-item active" {% endif %}>
            <a class="page-link" href="{{ url_for('QA.index', page_index=questions.next_num) }}">下一页</a>
          </li>
        </ul>
      </nav>


    </div>
    <div class="col">

    </div>
  </div>
{% endblock %}